<template>
  <div class="home">
    <div class="header">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <img class="banner-img" src="/static/img/banner.png" alt="banner1">
        </mt-swipe-item>
        <mt-swipe-item>
          <img class="banner-img" src="/static/img/banner.png" alt="banner2">
        </mt-swipe-item>
        <mt-swipe-item>
          <img class="banner-img" src="/static/img/banner.png" alt="banner3">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="content">
      <div class="content-top">
        <div class="top-content">
          <div class="recommended-top bottom-border">
            <img class="special-user" src="/static/img/img_2@2x.png" alt="成为专享用户">
          </div>
          <div class="recommended-bottom">
            <div class="invite-view right-border">
              <img class="invite-img right-margin" src="/static/img/ico_invite.png" alt="邀请好友">
              <span>邀请好友</span>
            </div>
            <div class="rebate-view">
              <img class="invite-img right-margin" src="/static/img/ico_recom.png" alt="邀请好友">
              <span>推荐返利</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content-body">
        <div class="investment-view bottom-border">
          <span class="investment-head">定期投资</span>
          <span class="investment-more">更多></span>
          <div class="investment-slide"></div>
        </div>
        <div class="investment-list">
          <div class="investment-item">
            <h3 class="investment-title normal-weight">安速盈第139期</h3>
            <div class="ratedetail-top">
              <div class="rate-left">
                <span class="rate-big">24</span>
                <span class="rate-sign">%</span>
                <span class="rate-small">+5%</span>
              </div>
              <div class="rate-middle">
                <span class="rate-days">
                  20~60天
                </span>
              </div>
              <div class="rate-right">
                <div class="button-join">
                  可加入
                </div>
              </div>
            </div>
            <div class="ratedetail-bottom">
              <div class="history-money">历史年化收益率</div>
              <div class="possible-put">可投资金额：3.1万元</div>
            </div>
          </div>
          <div class="investment-item">
            <h3 class="investment-title normal-weight">安速盈第139期</h3>
            <div class="ratedetail-top">
              <div class="rate-left">
                <span class="rate-big">24</span>
                <span class="rate-sign">%</span>+
                <span class="rate-small">5%</span>
              </div>
              <div class="rate-middle">
                <span class="rate-days">
                  20~60天
                </span>
              </div>
              <div class="rate-right">
                <div class="button-join disabled-color">
                  还款中
                </div>
              </div>
            </div>
            <div class="ratedetail-bottom">
              <div class="history-money">历史年化收益率</div>
              <div class="possible-put">可投资金额：3.1万元</div>
            </div>
          </div>
          <div class="investment-item">
            <h3 class="investment-title normal-weight">安速盈第139期</h3>
            <div class="ratedetail-top">
              <div class="rate-left">
                <span class="rate-big">24</span>
                <span class="rate-sign">%</span>+
                <span class="rate-small">5%</span>
              </div>
              <div class="rate-middle">
                <span class="rate-days">
                  20~60天
                </span>
              </div>
              <div class="rate-right">
                <div class="button-join disabled-color">
                  以满额
                </div>
              </div>
            </div>
            <div class="ratedetail-bottom">
              <div class="history-money">历史年化收益率</div>
              <div class="possible-put">可投资金额：3.1万元</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
        <img class="foot-img" src="/static/img/xxpl_img.png" alt="信息披露">
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home {
   background-color: #f2f2f2;
   padding-bottom: 85px;
  .header {
    height: 5rem;
    .mint-swipe {
      height: 5rem;
      overflow: hidden;
      .banner-img {
        width: 100%;
        height: 5rem;
      }
      .mint-swipe-item {
        height: 100%;
      }
      // .mint-swipe-indicators {
      //   bottom: 26px;
      // }
    }
  }
  .content {
    .content-top {
      height: 4.5rem;
      position: relative;
      .top-content {
        background-color: #fff;
        border-radius: 10px;
        width: 90%;
        height: 4.5rem;
        top: -.3rem;
        left: 5%;
        position: absolute;
        .recommended-top {
          height: 72%;
          display:flex;
          align-items: center;
          .special-user {
            width: 100%;
            height: 70%;
          }
          .rtop-left, .rtop-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
          .rtop-left {
            line-height: 5vh;
          }
          .recommended-img {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            border: 1px solid;
          }
        }
        .recommended-bottom {
          height: 28%;
          display: flex;
          .invite-view , .rebate-view{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            .invite-img, .rebate-img {
              width: .7rem;
              height: auto;
            }
          }
        }
      }
    }
    .content-body {
      background-color: #fff;
      .investment-view {
        padding: .328125rem;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .investment-head {
          font-size: 20px;
          color: #444;
        }
        .investment-more {
          font-size: 14px;
          color: #999;
        }
        .investment-slide {
          width: .08rem;
          height: .6rem;
          background-color: #2A60E2;
          position: absolute;
          left: 0;
          top: .358125rem;
        }
      }
      .investment-list {
        padding: 0 .625rem;
        margin-bottom: .3125rem;
        .investment-item:last-child {
          border: 0;
        }
        .investment-item {
          padding-bottom: .65625rem;
          border-bottom: 1px solid #DEDEDE;
          .investment-title {
            font-size: 20px;
            color: #444;
            margin: .4rem 0 .2rem 0;
          }
          .ratedetail-top {
            display: flex;
            align-items: center;
            margin-bottom: .15rem;
            .rate-left, .rate-right, .rate-middle {
              flex: 1;
              display: flex;
              align-items: center;
            }
            .rate-left {
              color: #fe6d4b;
              .rate-big {
                font-size: 20px;
                }
                .rate-sign {
                font-size: 18px;
                }
                .rate-small {
                  font-size: 16px;
                  margin-top: 1px;
                }
            }
            .rate-middle {
              .rate-days {
                font-size: 18px;
                color: #444;
              }
            }
            .rate-right {
              display: flex;
              justify-content: flex-end;
              align-items: center;
              .button-join {
                width: 2rem;
                height: .8rem;
                background: url('/static/img/btn_join.png') no-repeat;
                background-size: 100% 100%;
                color: white;
                font-size: 18px;
                text-align: center;
                line-height: .8rem;
              }
              .disabled-color {
                background: grey;
              }
            }
          }
          .ratedetail-bottom {
            display: flex;
            align-items: center;
            .history-money, .possible-put {
              width: 33.3%;
              color: #999;
              font-size: .38rem;
            }
            .possible-put {
              width: 50%;
            }
          }
        }
      }
    }
  }
  .foot {
    background-color: #fff;
    padding: .2rem .625rem;
    .foot-img {
      width: 100%;
      height: auto;
    }
  }
}
</style>

